<template>
    <el-col :span="15">
        <div class="grid-content bg-purple">
            <h2>评论回复：</h2>
            <ul id="aside">
                <li v-for="item in list" :key="item.id">
                <div>
                    <h3>{{item.userName}}说：</h3>
                    <p>{{item.comment}}</p>
                </div>
                <el-button type="text" icon="el-icon-delete-solid" @click="open(item.userName,item.id)"></el-button>
                <!-- <i class="el-icon-delete-solid" @click="handle(item.id)"></i> -->
                </li>
                <h1 v-show="!list.length">暂无评论，点击左侧添加评论！</h1>
            </ul>
        </div>
    </el-col>
</template>

<script>
import {mapState,mapMutations} from "vuex"

export default {
    computed:{
        ...mapState(["list"])
    },
    methods:{
        ...mapMutations(["DEL_COMMENT"]),
    //   handle(id){
    //       console.log(id)
    //   },
      open(userName,id) {
        this.$confirm('确定删除 '+userName+' 的评论吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // this.$store.commit("DEL_COMMENT",id)
            this.DEL_COMMENT(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    updated(){
        localStorage.setItem("comment",JSON.stringify(this.list))
    }
}
</script>

<style>

</style>